<template>
  <div class="home">
    <el-form :inline="true" :model="content" class="demo-form-inline">
      <el-form-item >
        <el-input v-model="content.circuit_number" placeholder="线路编号"></el-input>
      </el-form-item>
      <el-form-item >
        <el-input v-model="content.circuit_name" placeholder="线路名称"></el-input>
      </el-form-item>
      <el-form-item >
         <el-select v-model="content.circuit_type_id" placeholder="线路类型">
            <el-option v-for="item in tableData1" :key="item.circuitTypesId" :label="item.circuitTypesName" :value="item.circuitTypesId">{{item.circuitTypesName}}</el-option>
          </el-select>
       </el-form-item>
      <el-form-item>
        <el-button round type="primary" icon="el-icon-search" @click="onSubmit"
          >搜索</el-button>
          <el-button round type="primary" icon="el-icon-search" @click="onSubmit1"
          >重置</el-button>
      </el-form-item>
    </el-form>
    <el-container>
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        size="mini"
        round
        @click="add()"
        >+新增线路</el-button>
    </el-container>
    <el-table :header-cell-style="{ background: '#fafafa',color: '#333',}"
    :data="tableData" :row-key="getRowKey" :expand-row-keys="expands" @expand-change="expandChange">
    <el-table-column label="" type="expand" >
      <template slot-scope="scope">
          <el-table :data="scope.row.ruleItemData" style="margin-left: 50px"
          :header-cell-style="{ background: '#fafafa',color: '#333',}">
          <el-table-column label="车次名称" width="180">
            <template slot-scope="scope">
              <span style="margin-left: -1px">{{ scope.row.trainNumberName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="发车频次" width="180">
            <template slot-scope="scope">
              <span style="margin-left: -5px">{{ scope.row.trainStartDepartment }} /天</span>
            </template>
          </el-table-column>
          <el-table-column label="到达时间" width="180">
            <template slot-scope="scope">
               <span style="margin-left: -5px">{{ scope.row.trainActualTimeArrival }} /天</span>
            </template>
          </el-table-column>
          <el-table-column label="车辆司机安排" width="200">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>{{ scope.row.trainVehicleId }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium" style="margin-left: -15px">
                    {{scope.row.tmsVoiture==null?"": scope.row.tmsVoiture.voitureBusNumbe}} -  - {{scope.row.tmsDriverDetails==null?"":scope.row.tmsDriverDetails.driverName }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                style="margin-left: -10px"
                size="mini"
                icon="el-icon-edit"
                type="warning"
                round
                @click="updCC(scope.$index, scope.row)"
                >编辑车次</el-button>
              <el-button
                style="margin-left: 1px"
                size="mini"
                type="danger"
                round
                icon="el-icon-delete"
                @click="delCC(scope.$index, scope.row)"
                >删除车次</el-button>
              <el-button
                style="margin-left: 1px"
                size="mini"
                type="primary"
                round
                icon="el-icon-circle-plus-outline"
                @click="addCL(scope.$index, scope.row)"
                >安排车辆</el-button>
              <el-button
                style="margin-left: 1px"
                size="mini"
                type="primary"
                round
                icon="el-icon-circle-plus-outline"
                @click="addSJ(scope.$index, scope.row)"
                >安排司机</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <!-- type="expand" -->
      <el-table-column label="线路编号" width="100" >
        <template slot-scope="scope">
          <span style="margin-left: -10px">{{ scope.row.circuitNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="线路名称" width="120">
        <template slot-scope="scope">
          <span style="margin-left: -1px">{{ scope.row.circuitName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="线路类型" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 5px">{{ scope.row.tmsCircuitTypes.circuitTypesName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="起始地机构" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 5px">{{ scope.row.circuitDestination }}</span>
        </template>
      </el-table-column>
      <el-table-column label="目的地机构" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 5px">{{ scope.row.circuitOrigin }}</span>
        </template>
      </el-table-column>
       <el-table-column label="距离(千米)" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.circuitDistance }}</span>
        </template>
      </el-table-column>
       <el-table-column label="平均成本(元)" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.circuitCost }}</span>
        </template>
      </el-table-column>
       <el-table-column label="预计时间(分钟)" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.circuitScheduledTime }}</span>
        </template>
      </el-table-column>
      <!-- <span v-if="scope.row.dwxx == 2">首席讲师</span>
          <span v-if="scope.row.dwxx == 1">高级讲师</span> -->
      <el-table-column label="线路地图" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">
            <a @click="showBmap(scope.$index, scope.row)" class="el-icon-map-location" style="text-decoration:none;">地图</a>
            <el-dialog title="百度地图" :visible.sync="dialogTableVisible1">
                <template>
                  <baidu-map class="map" :center="center" :zoom="zoom" :scroll-wheel-zoom="true">
                    <bm-driving :start="pointstart" :end="pointend" :auto-viewport="true" :panel="false"></bm-driving>
                  </baidu-map>
                </template>
            </el-dialog>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            style="margin-left: -12px"
            size="mini"
            icon="el-icon-edit"
            type="warning"
            round
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
          <el-button
            style="margin-left: -12px"
            size="mini"
            type="danger"
            round
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          <el-button
            style="margin-left: -12px"
            size="mini"
            type="primary"
            round
            icon="el-icon-circle-plus-outline"
            @click="addCC(scope.$index, scope.row)"
            >增加车次</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="content.page"
      :page-sizes="[2, 3, 4]"
      :page-size="content.num"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="form" >
        <el-form-item label="线路编号" prop="circuitNumber" :label-width="formLabelWidth">
          <el-input v-model="form.circuitNumber" style="width: 220px" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="线路名称" prop="circuitName" :label-width="formLabelWidth">
          <el-input v-model="form.circuitName" style="width: 220px" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="线路类型" prop="circuitTypeId" :label-width="formLabelWidth">
         <el-select v-model="form.circuitTypeId" placeholder="选择线路类型">
            <el-option v-for="item in tableData1" :key="item.circuitTypesId" :label="item.circuitTypesName"  :value="item.circuitTypesId" >{{item.circuitTypesName}}</el-option>
          </el-select>
       </el-form-item>
         <!-- 单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来 -->
        <el-form-item label="起始地机构" prop="circuitDestination" :label-width="formLabelWidth">
          <el-cascader  v-model="form.circuitDestination" :options="jigouDate" :props="defaultProps" :show-all-levels="false" clearable placeholder="选择起始地机构"></el-cascader>
       </el-form-item>
       <el-form-item label="目的地机构" prop="circuitOrigin" :label-width="formLabelWidth">
         <el-cascader  v-model="form.circuitOrigin" :options="jigouDate" :props="defaultProps" :show-all-levels="false" clearable placeholder="选择目的地机构"></el-cascader>
       </el-form-item>
        <el-form-item label="成本" prop="circuitCost" :label-width="formLabelWidth">
          <el-input v-model="form.circuitCost" style="width: 220px" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="预计时间" prop="circuitScheduledTime" :label-width="formLabelWidth">
          <el-input v-model="form.circuitScheduledTime" style="width: 220px" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button round type="info" @click="dialogFormVisible = false">取 消</el-button>
        <el-button round type="primary" @click="updStu()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleUpdCc">
      <el-form :model="updC" ref="updC" >
        <el-form-item label="线路名称" prop="xlname" :label-width="formLabelWidth">
          <el-input v-model="this.xlname" style="width: 220px" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="车次名称" prop="trainNumberName" :label-width="formLabelWidth">
          <el-input v-model="updC.trainNumberName" style="width: 220px" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="发车时间" prop="trainStartDepartment" :label-width="formLabelWidth">
          <el-time-select
            size="mini"
            placeholder="请选择发车时间"
            style="width: 120px;margin-left: -80px"
            v-model="updC.trainStartDepartment"
            :picker-options="{
              start: '00:00',
              step: '00:30',
              end: '23:30'
            }">
          </el-time-select>
          <span style="margin-left:8px">天</span>
        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
        <el-button type="info" @click="dialogVisibleUpdCc = false">取 消</el-button>
        <el-button type="primary" @click="updCheci()">确 定</el-button>
       </div>
    </el-dialog>
     <el-dialog title="安排车辆" :visible.sync="dialogVisibleAddCl" center width="40%">
      <el-form :model="anCl" ref="anCl">
        <el-form-item label="线路名称" prop="xlname" :label-width="formLabelWidth1">
           <el-input v-model="anCl.xlname" style="width: 220px" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="车次名称" prop="trainNumberName" :label-width="formLabelWidth1">
           <el-input v-model="anCl.trainNumberName" style="width: 220px" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="发车时间" prop="trainStartDepartment" :label-width="formLabelWidth1">
           <el-input v-model="anCl.trainStartDepartment" style="width: 220px" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="到达时间" prop="trainActualTimeArrival" :label-width="formLabelWidth1">
           <el-input v-model="anCl.trainActualTimeArrival" style="width: 220px" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="车辆安排" prop="trainVehicleId" :label-width="formLabelWidth1">
           <el-select v-model="anCl.trainVehicleId" placeholder="选择车辆">
            <el-option v-for="item in tcliniCl" :key="item.voitureId" :label="item.voitureBusNumbe" :value="item.voitureId" :disabled="item.ruleItemData">{{item.voitureBusNumbe}}</el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button round type="info" @click="dialogVisibleAddCl = false">取 消</el-button>
        <el-button round type="primary" @click="updCcCl()">确 定</el-button>
      </div>
     </el-dialog>
     <el-dialog title="安排司机" :visible.sync="dialogVisibleAddSj" center width="40%">
      <el-form :model="anCl" ref="anCl">
        <el-form-item label="线路名称" prop="xlname" :label-width="formLabelWidth1">
           <el-input v-model="anCl.xlname" style="width: 220px" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="车次名称" prop="trainNumberName" :label-width="formLabelWidth1">
           <el-input v-model="anCl.trainNumberName" style="width: 220px" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="发车时间" prop="trainStartDepartment" :label-width="formLabelWidth1">
           <el-input v-model="anCl.trainStartDepartment" style="width: 220px" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="到达时间" prop="trainActualTimeArrival" :label-width="formLabelWidth1">
           <el-input v-model="anCl.trainActualTimeArrival" style="width: 220px" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="司机安排" prop="trainDriverId" :label-width="formLabelWidth1">
           <el-select v-model="anCl.trainDriverId" placeholder="选择司机">
            <el-option v-for="item in tcliniSj" :key="item.driverId" :label="item.driverName" :value="item.driverId" :disabled="item.ruleItemData">{{item.driverName}}</el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button round type="info" @click="dialogVisibleAddSj = false">取 消</el-button>
        <el-button round type="primary" @click="updCcSj()" :disabled="bj2">确 定</el-button>
      </div>
     </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
import {BMPGL} from '@/getpoint.js';

let geoc = null;
//存放地址经纬度
let bmappoint="";
let bmappoint1="";
let bmappoint2="";
export default Vue.extend({
  data(){
    return {
      //设置展开行只显示一行
      expands: [],
      getRowKey:(row)=>{
        return row.circuitId;
      },
      jigouDate:[],
      defaultProps: {
          value: 'cliqueId',
          label: 'cliqueName',
          emitPath:false,
        },
      tableData:[],
      tableData1:[],
      total: 0,
      tcliniCl:[],
      tcliniSj:[],
      dialogTableVisible1: false,//是否显示dialog，默认不显示
      dialogFormVisible: false, //是否显示dialog，默认不显示
      dialogVisibleUpdCc: false,
      dialogVisibleAddCl: false,
      dialogVisibleAddSj:false,
      formLabelWidth: "100px",
      formLabelWidth1:"170px",
      bj:"",
      bj1:"",
      bj2:"",
      content: {//分页信息
        page: 1,
        num: 2,
        circuit_number: "",
        circuit_name:"",
        circuit_type_id:"",
      },
      form: {
        circuitId:"",
        circuitNumber:"",
        circuitName:"",
        circuitDestination:"",
        circuitOrigin:"",
        circuitDistance: "",
        circuitCost:"",
        circuitScheduledTime: "",
        circuitRouteMap: "",
        circuitTypeId:"",
        circuitServiceDetails:"",
        circuitStatus:"0",
      },
      xlname:"",
      //添加,编辑车次
      updC:{
        trainNumberId:"",
        trainWhereLine:"",
        trainNumberName:"",
        trainStartDepartment:"",
        typeTran:"",
        trainStatus:"0",
      },
      //安排车辆,司机
      anCl:{
        xlname:"",
        trainNumberId:"",//车次编号
        trainNumberName:"",//车次名称
        trainStartDepartment:"",//发车时间
        trainActualTimeArrival:"",//实际到达时间
        trainVehicleId:"",//车次车辆编号
        trainDriverId:"",//车次司机编号
        voitureWorkingCondition:"",//车辆工作状态
        driverStatus:"",//司机工作状态
      },
      center: {lng: 112.99195, lat: 28.20702},
      zoom: 11,
      //驾车路径
       pointstart:{},
       pointend:{},
    }
  },
  mounted() {
        this.$nextTick(function () {
            var _this = this;
            BMPGL(_this.ak).then((BMap) => {
                geoc = new BMap.Geocoder();
                //地址逆解析
                // let newLoc=this.aa.split(",");
                // point1= new BMap.Point(parseFloat(newLoc[0]),parseFloat(newLoc[1]));
                //_this.load1(BMap);
            });
           
        });
    },
  methods:{
    expandChange(row,expandedRows){
      this.anCl.xlname=row.circuitName;
      let ids= row.circuitServiceDetails;
      //console.log(expandedRows);
      // 该处是用于判断是展开还是收起行，只有展开的时候做请求，避免多次请求！
      if(expandedRows.length>0){
        //判断是否只展示一行
       this.expands=[];
       if(row){
        this.expands.push(row.circuitId);
       }
        axios.get("/api/transshipment-tms-circuit/getNumberById?ids="+ids).then(data=>{
          this.tableData.forEach((element,index) => {
            if(element.circuitServiceDetails==ids){
            this.tableData[index].ruleItemData=data.data;
            }
          });
        })
      }else{
        this.expands=[];
      }
    },
    //地图
    showBmap(index,row,){
      this.dialogTableVisible1=true;
      //驾车路径
      var Bma=row.circuitRouteMap;
      let pointt= Bma.split(",");
      //console.log(pointt);
      this.pointstart={lng:pointt[0],lat:pointt[1]};
      this.pointend={lng:pointt[2],lat:pointt[3]};
      //时间 路程
      var output = "从北京到长沙驾车总路程为:";
      let EARTH_RADIUS = 6378.137;  
      let radLat1 = this.rad(pointt[0]);  
      let radLat2 = this.rad(pointt[2]);  
      let a = radLat1 - radLat2;  
      let b = this.rad(pointt[1]) - this.rad(pointt[3]);  
      let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +  
      Math.cos(radLat1) * Math.cos(radLat2) *  
      Math.pow(Math.sin(b / 2), 2)));  
      s = s * EARTH_RADIUS;  
      s = Math.round(s * 10000) / 10000;  
      console.log(output+s+"公里")
    },
    //安排车辆对话框
    addCL(index,row){
      this.anCl.trainNumberId=row.trainNumberId;
      this.anCl.trainNumberName=row.trainNumberName;
      this.anCl.trainStartDepartment=row.trainStartDepartment;
      this.anCl.trainActualTimeArrival=row.trainActualTimeArrival;
      if(row.trainVehicleId==null){
         this.anCl.trainVehicleId=row.trainVehicleId;
      }else{
        this.anCl.trainVehicleId=parseInt(row.trainVehicleId);
      }
      this.dialogVisibleAddCl=true;
      axios.get("/api/transshipment-tms-circuit/getVoiture").then(data=>{
         //判断车辆的工作状态
        data.data.forEach((element,index)=>{
          if(data.data[index].voitureWorkingCondition=="1"){
          element.ruleItemData=true;
          }
        })
        this.tcliniCl=data.data;
        //console.log(data.data)
      })
    },
    //安排车次车辆
    updCcCl(){
      axios.get("/api/transshipment-tms-train-number/updByClId?ccid="+this.anCl.trainNumberId+"&clid="+this.anCl.trainVehicleId).then(data=>{
        if(data.data){
          this.load();
           this.$message({
             message: '安排车辆成功',
             type: 'success'
            });
            this.dialogVisibleAddCl=false;
        }
      })
    },
    //安排司机对话框
    addSJ(index,row){
      if(row.trainVehicleId==null){
        this.anCl.trainNumberId=row.trainNumberId;
        this.anCl.trainNumberName=row.trainNumberName;
        this.anCl.trainStartDepartment=row.trainStartDepartment;
        this.anCl.trainActualTimeArrival=row.trainActualTimeArrival;
        if(row.trainDriverId==null){
          this.anCl.trainDriverId=row.trainDriverId;
        }else{
          this.anCl.trainDriverId=parseInt(row.trainDriverId);
        }
        this.dialogVisibleAddSj=true;
        this.bj2=true;
         axios.get("/api/transshipment-tms-circuit/getDriver").then(data=>{
          //判断司机的工作状态
          data.data.forEach((element,index)=>{
            if(data.data[index].driverStatus=="1"){
            element.ruleItemData=true;
            }
          })
          this.tcliniSj=data.data;
        })
      }else{
        this.anCl.trainNumberId=row.trainNumberId;
        this.anCl.trainNumberName=row.trainNumberName;
        this.anCl.trainStartDepartment=row.trainStartDepartment;
        this.anCl.trainActualTimeArrival=row.trainActualTimeArrival;
        if(row.trainDriverId==null){
          this.anCl.trainDriverId=row.trainDriverId;
        }else{
          this.anCl.trainDriverId=parseInt(row.trainDriverId);
        }
        this.dialogVisibleAddSj=true;
        this.bj2=false;
        axios.get("/api/transshipment-tms-circuit/getDriver").then(data=>{
          //判断司机的工作状态
          data.data.forEach((element,index)=>{
            if(data.data[index].driverStatus=="1"){
            element.ruleItemData=true;
            }
          })
          this.tcliniSj=data.data;
        })
      }
    },
    //安排车次司机
    updCcSj(){
      axios.get("/api/transshipment-tms-train-number/updBySjId?ccid="+this.anCl.trainNumberId+"&sjid="+this.anCl.trainDriverId).then(data=>{
        if(data.data){
           this.$message({
             message: '安排司机成功',
             type: 'success'
            });
            this.dialogVisibleAddSj=false;
             this.load();
        }
      })
    },
    //添加车次对话框
    addCC(index,row){
      this.dialogVisibleUpdCc=true;
      this.bj1=true;
      this.updC={};
      this.xlname=row.circuitName;
      this.updC.trainWhereLine=row.circuitId;
    },
    //编辑车次对话框
    updCC(index,row){
      this.bj1=false;
      this.dialogVisibleUpdCc=true;
      axios.get("/api/transshipment-tms-circuit/getCircuitByNumId?id="+row.trainWhereLine).then(data=>{
        this.xlname=data.data.circuitName;
      })
      this.updC.trainNumberId=row.trainNumberId;
      this.updC.trainNumberName=row.trainNumberName;
      this.updC.trainStartDepartment=row.trainStartDepartment;
    },
    //添加,编辑车次
    updCheci(){
      if(this.bj1){
        //添加车次
        // if(this.updC.trainStartDepartment==this.updC.trainStartDepartment){
        //   this.updC.trainStartDepartment=this.updC.trainStartDepartment;
        // }else{
           var faTime= this.updC.trainStartDepartment+":00";
           this.updC.trainStartDepartment=faTime;
        //}
        console.log(this.updC)
        axios.post("/api/transshipment-tms-circuit/addTnum",this.updC).then(data=>{
          if(data.data){
             this.$message({
              type: 'success',
              message: '添加车次成功!'
          });
            this.load();
            this.dialogVisibleUpdCc=false;
          }else{
            this.$message.error({
              type: 'success',
              message: '添加车次失败!'
          });
          }
        })
        
      }else{
        //编辑车次
      var faTime= this.updC.trainStartDepartment+":00";
       this.updC.trainStartDepartment=faTime;
        axios.post("/api/transshipment-tms-train-number/updByCcId",this.updC).then(data=>{
          if(data.data){
            this.$message({
              type: 'success',
              message: '编辑车次成功!'
          });
            this.load();
            this.dialogVisibleUpdCc=false;
          }else{
            this.$message.error()({
              type: 'success',
              message: '编辑车次失败!'
          });
          }
        })
      }
    },
    //删除车次
    delCC(index,row){
      //console.log(row)
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post("/api/transshipment-tms-train-number/delByCcId",row).then(data=>{
            if(data.data){
                this.load();
            }else{
              this.$message({
              type: 'success',
              message: '删除失败!'
          });
            }
      })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    load(){
      axios.post("/api/transshipment-tms-circuit/getCircuitPage",this.content).then(data=>{
        //给每行数据强制追加一个数据项
        data.data.rows.forEach((element,index)=>{
          //算出两地的距离
          var Bma=element.circuitRouteMap;
          var pointt = Bma.split(",");
          let EARTH_RADIUS = 6378.137;  
          let radLat1 = this.rad(pointt[0]);  
          let radLat2 = this.rad(pointt[2]);  
          let a = radLat1 - radLat2;  
          let b = this.rad(pointt[1]) - this.rad(pointt[3]);  
          let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +  
          Math.cos(radLat1) * Math.cos(radLat2) *  
          Math.pow(Math.sin(b / 2), 2)));  
          s = s * EARTH_RADIUS;  
          s = Math.round(s * 10000) / 10000; 
          element.circuitDistance=s;

          element.ruleItemData =[];
        })
        this.tableData = data.data.rows; //获取分页数据
        this.total = data.data.total; //获取总记录数
      })
      axios.get("/api/transshipment-tms-circuit/findAllTmsCircuitTypes").then(data=>{
        this.tableData1=data.data;
      })
    },
    //计算路程
    rad(d) {  
    return d * Math.PI / 180.0;  
    },
    //编辑线路对话框
    handleEdit(index,row){
      this.form=row;
      //this.form.did=parseInt(row.dwid);
      this.dialogFormVisible=true;
      this.bj=false;
      axios.get("/api/findMenuListmanagement").then((data) => {
              this.jigouDate = data.data
        });
    },
    //删除线路
    handleDelete(index,row){
       this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post("/api/transshipment-tms-circuit/delTmsCircuit",row).then(data=>{
            if(data.data){
                this.load();
            }else{
              this.$message({
              type: 'success',
              message: '删除失败!'
          });
            }
      })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
     onSubmit(){
       this.load();
     },
    onSubmit1(){
      this.content.circuit_number="",
      this.content.circuit_name="",
      this.content.circuit_type_id="",
      this.load();
    },
    //添加线路 (对话框)
    add(){
      axios.get("/api/findMenuListmanagement").then((data) => {
              this.jigouDate = data.data
        });
      this.dialogFormVisible=true;
      this.bj=true;
      this.form={};
    },
    //添加  编辑线路
    // //"湖南省衡阳市衡东县"
      // geoc.getPoint(this.form.circuitDestination,function(point){
      //   bmappoint=point.lng+","+point.lat;
      //     console.log(point.lng+","+point.lat);
      // })
      // //"北京市海淀区上地10街"
      // geoc.getPoint(this.form.circuitOrigin,function(point1){
      //   bmappoint1=point1.lng+","+point1.lat;
      //     console.log(point1.lng+","+point1.lat);
      // })    
      // bmappoint2=bmappoint+","+bmappoint1;
      // //console.log(bmappoint2)
      // this.form.circuitRouteMap=bmappoint2;
    updStu(){
      if(this.bj){
        if(this.form.circuitDestination==this.form.circuitOrigin){
          this.$message.error({
              type: 'success',
              message: '起始机构与目的机构重复，添加失败!'
          });
        }else{
        axios.post("/api/transshipment-tms-circuit/addTmsCircuit",this.form).then(data=>{
          if(data.data){
             this.$message({
              message: '恭喜你，添加成功',
              type: 'success'
            });
          }
           this.load();
        })
        this.dialogFormVisible=false;
        }
      }else{
        if(this.form.circuitDestination==this.form.circuitOrigin){
          this.$message.error({
              type: 'success',
              message: '起始机构与目的机构重复，修改失败!'
          });
        }else{
        axios.post("/api/transshipment-tms-circuit/updTmsCircuit",this.form).then(data=>{
          if(data.data){
             this.$message({
             message: '修改成功',
             type: 'success'
            });
          }
           this.load();
        })
        this.dialogFormVisible=false;
        }
      }
    },
    handleSizeChange(val){
       this.content.num = val;
      this.load();
    },
    handleCurrentChange(val){
       this.content.page = val;
      this.load();
    },
  },
  created(){
    this.load();
   },
})
</script>

<style>
.map {
  margin-left: -1%;
  width: 650px;
  height: 450px;
}
</style>
